<script setup lang="ts">
  import {ref} from "vue";
  import router from "@/Router";
  import {currentSearchSongs, songSearch} from "@/store/songStore";
  import {res} from "@/store/dataType";
  import {findAllBySearchContains} from "@/Network/songApi";
  import RightUserPhoto from "@/Components/RightUserPhoto.vue";
  import Navigate from "@/Components/Navigate.vue";

  const emit = defineEmits(["search-word"])
  const sendSearchTab = async () => {
    if(songSearch.value==''){
      alert("搜索词不能为空")
    }else{
      console.log("search:")
      let search =ref({
        search:songSearch.value
      })
      console.log(search.value.search)
      let res1:res<any>= await findAllBySearchContains(search.value)
      currentSearchSongs.value = await res1.data
      emit('search-word',JSON.stringify(songSearch.value))
      // songSearch.value =''
      router.push("/search")
    }
  }

  /*搞一个userSearch来获取用户的输入，存一下search的搜索内容*/

</script>

<template>

  <div class="undoRedoSearch fixed w-full h-20 flex gap-1 justify-between items-center  bg-gray-1 z-99">
    <div class="flex items-center items-center">
      <div class="back-go  flex gap-0.5 ml-5">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7 text-yellow" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.25 3.75L5.75 8l4.5 4.25"/></svg>
        <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7 text-yellow" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.25L10.25 8l-4.5-4.25"/></svg>
      </div>
      <div class="search w-60 h-10 bg-gray-2 rounded-2xl flex justify-start items-center gap-1 py-2 pl-3 ml-4">
        <svg @click="sendSearchTab"
             xmlns="http://www.w3.org/2000/svg" class="w-7 h-7 text-yellow-3" viewBox="0 0 16 16"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m11.25 11.25l3 3"/><circle cx="7.5" cy="7.5" r="4.75"/></g></svg>
        <input @keyup.enter="sendSearchTab" v-model="songSearch"
               class=" grow   bg-gray-2  outline-none ml-1 pr-5  text-gray-7" placeholder="搜索音乐"/>

      </div>
    </div>
    <div class="flex justify-center items-center mr-60 gap-4">
      <right-user-photo></right-user-photo>
      <div class="text-yellow font-bold">|</div>
      <navigate></navigate>

    </div>
  </div>

</template>

<style scoped>
div::-webkit-scrollbar {
  display: none;
}
</style>